a {
    display: block;
    width: 100px;
    height: 100px;
}

span {
    display: none;
}

#direction {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 400px;
}

#forward {
    position: absolute;
    top: 6.25%;
    left: 37.5%;
    width: 25%;
    height: 25%;
    background-image: url('images/playup.png');
    background-size: 100%;
}

#back {
    position: absolute;
    top: 68.75%;
    left: 37.5%;
    width: 25%;
    height: 25%;
    background-image: url('images/playdown.png');
    background-size: 100%;
}

#left {
    position: absolute;
    top: 37.5%;
    left: 6.25%;
    width: 25%;
    height: 25%;
    background-image: url('images/playleft.png');
    background-size: 100%;
}

#right {
    position: absolute;
    top: 37.5%;
    left: 68.75%;
    width: 25%;
    height: 25%;
    background-image: url('images/playright.png');
    background-size: 100%;
}

#stop {
    position: absolute;
    top: 37.5%;
    left: 37.5%;
    width: 25%;
    height: 25%;
    background-image: url('images/pause.png');
    background-size: 100%;
}

/*

#forward {
    position: absolute;
    top: 20px;
    left: 140px;
    background-image: url('images/playup.png');
}

#back {
    position: absolute;
    top: 260px;
    left: 140px;
    background-image: url('images/playdown.png');
}

#left {
    position: absolute;
    top: 140px;
    left: 20px;
    background-image: url('images/playleft.png');
}

#right {
    position: absolute;
    top: 140px;
    left: 260px;
    background-image: url('images/playright.png');
}

#stop {
    position: absolute;
    top: 140px;
    left: 140px;
    background-image: url('images/pause.png');
}*/

#slider {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 100px;
}

.ui-slider-handle {
    height: 100px; !important
}
